<template>
  <div class="home">
    <!-- 1 -->
    <input type="checkbox" v-model="checkAllone" @change="checkClickone(checkAllone)">one
    <van-row v-for="(item,index) in oneList">
      <van-col span="3">
        <input type="checkbox" v-model="item.fleg" @change="checked">
      </van-col>
      <van-col span="10">
        <van-card num="2" :price="item.price" :title="item.title" :thumb="item.pic">
          <!-- <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template> -->
          <template #footer>
            <van-stepper v-model="item.num" />
          </template>
        </van-card>
      </van-col>
      <van-col span="11">
      </van-col>
    </van-row>
    总价{{priceAll}}

    <!-- 2 -->
    <input type="checkbox" v-model="checkAlltwo" @change="checkClicktwo(checkAlltwo)">two
    <van-row v-for="(item,index) in twoList" :key="index">
      <van-col span="3">
        <input type="checkbox" v-model="item.fleg" @change="checkedTwo">
      </van-col>
      <van-col span="10">
        <van-card num="2" :price="item.price" :title="item.title" :thumb="item.pic">
          <!-- <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template> -->
          <template #footer>
            <van-stepper v-model="item.num" />
          </template>
        </van-card>
      </van-col>
      <van-col span="11">
      </van-col>
    </van-row>
    总价{{priceAlltwo}}

  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      oneList: [],
      twoList: [],
      threeList: [],
      // checked: false, //第一个复选框
      value: "", //步进器
      checkAllone: false, //第一个全选
      // checkClickone:'' //第一个全选按钮事件
      // 2
      checkAlltwo: false //第二个全选
    };
  },
  computed: {
    // 1
    priceAll() {
      let num = 0;
      this.oneList.forEach(item => {
        // 选中再计算
        if (item.fleg == true) {
          num += item.num * item.price;
        }
      });
      return num;
    },
    // 1
    priceAlltwo() {
      let num = 0;
      this.twoList.forEach(item => {
        // 选中再计算
        if (item.fleg == true) {
          num += item.num * item.price;
        }
      });
      return num;
    }
  },
  methods: {
    // 第一个全选按钮
    checkClickone(checkAllone) {
      // 点击全部选中
      // this.oneList.fleg = checkAllone;
      this.oneList.map(item => (item.fleg = checkAllone));
      console.log(this.checked);
    },
    // 第二个全选按钮
    checkClicktwo(checkClicktwo) {
      this.twoList.map(item => (item.fleg = checkClicktwo));
      console.log(this.checked);
    },
    // 第一个单选事件
    checked() {
      this.checkAllone = this.oneList.every(item => item.fleg == true);
      // console.log(a);
      // if (a == true) {
      //   this.checkAllone = a;
      // }
    },
    // 第二个单选事件
    checkedTwo() {
      this.checkAlltwo = this.twoList.every(item => item.fleg == true);
      // console.log(a);
      // if (a == true) {
      //   this.checkAllone = a;
      // }
    }
  },
  created() {
    axios.get("list.json").then(res => {
      // console.log(res.data.result);
      this.oneList = res.data.result;
    });
    axios.get("list.json").then(res => {
      // console.log(res.data.list);
      this.twoList = res.data.list;
    });
    axios.get("list.json").then(res => {
      // console.log(res.data.one);
      this.threeList = res.data.one;
    });
  }
};
</script>
